import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import './blog_item.less'
import blogApi from '../../../api/blog'
class BlogItem extends Component {

  goBlogDetail = (blogId) => {
    return () => {
      blogApi.clickBlog({blogId})
      this.props.history.push({
        pathname: '/blog-detail',
        search:'blogId='+blogId
      })
    }
  }
  render() {
    const {id,title,description,memberAvatar,memberName,gmtCreate,views,categoryName} = this.props
    return (
      <li className="blog-item" onClick={this.goBlogDetail(id)}>
        <h3>{title}</h3>
        <p className="texts">{description}</p>
        <div className="bottom-show">
          <div className="little-avatar">
            <img src={memberAvatar} alt="avatar" />
          </div>
          <div className="nick-name">{memberName}</div>
          <div className="little-box">
            <h4>时间：</h4>
            <span>{gmtCreate}</span>
          </div>
          <div className="little-box">
            <h4>浏览：</h4>
            <span>{views}</span>
          </div>
          <div className="little-box">
            <h4>分类：</h4>
            <span>{categoryName}</span>
          </div>
        </div>
      </li>
    )
  }
}
export default withRouter(BlogItem)
